<template>
  <div>
    <div style="display: none" class="QRCode" ref="qrCodeUrl"></div>
    <el-button size="small" type="primary" @click="createQrCode"
      >下载二维码</el-button
    >
  </div>
</template>

<script>
import FileSaver from "file-saver";
import JSZip from "jszip";
// import QRCode from "qrcodejs2";
export default {
  components: {},
  data() {
    return {
      ids: [
        "0e369d5c-d3de-4c62-cde8-08da269410c5",
        "3126134b-3c7f-440a-cde7-08da269410c5",
      ],
      QRCodeURL: [], //存放生成的二维码图片地址
    };
  },

  created() {},

  methods: {
    // 生成二维码
    createQrCode() {
      if (!this.ids.length) return;
      document.querySelector(".QRCode").innerHTML = ""; // 清空div中的二维码图片
      this.ids.forEach((each) => {
        // 循环创建二维码
        new QRCode(this.$refs.qrCodeUrl, {
          // 将创建好的二维码图片放在div中
          text: each, // 需要转换为二维码的内容
          width: 100,
          height: 100,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H,
        });
      });

      let a = new Promise((resolve) => {
        setTimeout(() => {
          this.QRCodeURL = [];
          document.querySelectorAll(".QRCode img").forEach((each) => {
            // 查找div中的二维码图片
            this.QRCodeURL.push(each.src); // 保存创建的二维码图片地址
          });
          return resolve();
        }, 5000);
      });

      a.then(() => {
        this.batchQrCodeZip(); // 下载打包二维码图片
      });
    },

    batchQrCodeZip() {
      const zip = new JSZip(); //新建一个压缩文件
      const _this = this;
      const promises = [];
      for (const key in this.QRCodeURL) {
        const promise = _this.getFile(this.QRCodeURL[key]).then((data) => {
          // 根据二维码图片地址下载文件, 并存成ArrayBuffer对象
          zip.file(`${key}` + ".png", data, { binary: true }); // 逐个添加文件，需要加后缀".png"
        });
        promises.push(promise);
      }

      Promise.all(promises)
        .then(() => {
          zip.generateAsync({ type: "blob" }).then((content) => {
            // 生成二进制流
            FileSaver.saveAs(content, "二维码"); // 利用file-saver保存文件  自定义文件名
          });
        })
        .catch((res) => {
          console.log(res);
        });
    },

    // 根据二维码图片地址下载二维码
    getFile(url) {
      return new Promise((resolve, reject) => {
        axios({
          method: "get",
          url,
          responseType: "blob",
        })
          .then((response) => {
            resolve(response.data);
          })
          .catch((error) => {
            reject(error.toString());
          });
      });
    },
  },
};
</script>

<style lang="less" scoped></style>
